<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>

    </ul>
    <script>
        /*
            背景介绍:
                在ES6之前，我们想要写个可以插入变量的字符串，必须要用 + 拼接
                如果想写个html语句字符串，是不能回车换行的，可读性很差而且写起来很费劲

                最搞的是，开发的时候上面两个场景是经常一起出现的，让人叫苦不堪

            知识点补充:
                - js表达式:
                    就是会返回一个值的js代码，说白了就是用一个变量在代码左边接收，没有违和感的就是js表达式。包括但不限于 变量、方法的返回值、三元表达式、数字运算等

        */ 

        // 先看看传统的字符串插入变量的方法
        let name = 'mikaisa';
        let str = '我是'+name;

        // 但是ES6提出了模板字符串概念, 用``代替原来的引号，这个符号就是tab键上面、数字1左边的那个按键
        // 用这个定义的字符串不仅可以使用回车换行，还能用${ }代表你要在里面写js表达式，在这里我们就可以直接把变量放进去了，无需再自己拼接。不过其实底层原理还是拼接，只是不用你拼了
        let name2 = 'mikaisa';
        let str2 = `我是${name2}`;


        // 下面看看一个模拟场景，现在我要把这个数组里的内容放进li标签渲染到ul里
        let arr = ['mikaisa','张三','李四'];
        let ul = document.querySelector('ul');
        ul.innerHTML = arr.map(item=>`<li>${item}</li>`).join('');

    </script>
</body>
</html>